<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>线下会员添加</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
		<link rel="stylesheet" href="../css/mint-ui.css" />
		<link rel="stylesheet" href="../css/mobileSelect.css" />
		<link rel="stylesheet" href="../css/main.css" />
	<style>
		.mint-button--small{
			padding:0 4px;
		}
	</style>
	</head>
	<body>
		<div id="app">
			<img src="../images/logo.jpg" class="animated zoomIn" width="100%"/>
			<!--会员列表展示-->
			<div v-show="isOne">
				<br />
				<input type="text" maxlength="11" v-model="searchNum" class="addInput" 
					placeholder="输入手机号码"/>
				<mt-button type="primary" class="animated zoomInUp" 
				size="small" @click="search">查询</mt-button>
				<mt-button type="primary" class="animated zoomInUp" 
				size="small" @click="addInfos">添加会员</mt-button>
				<table cellpadding="0" cellspacing="0" class="addTable" border="1">
					<tr>
						<td>ID</td>
						<td>用户名</td>
						<td>手机号</td>
						<td>剩余金额</td>
						<td>操作</td>
					</tr>
					<tr v-for="item in datas">
						<td>{{item.id}}</td>
						<td>{{item.username}}</td>
						<td>{{item.mobile}}</td>
						<td>{{item.useraccount.balance}}</td>
						<td>
							<mt-button type="primary" class="animated zoomInUp" 
					size="small" @click="changeInfo(item.useraccount.userid)">余额操作</mt-button>
						</td>
					</tr>
				</table>
				<br /><br />
			</div>
			
			<!--添加会员-->
			<div v-show="isTwo">
				<!--<mt-field label="会员姓名" placeholder="会员姓名" 
					v-model="name"></mt-field>-->
				<mt-field label="手机号" placeholder="请输入手机号" 
					v-model="phone" :attr="{maxlength:11}"></mt-field>
				<div class="forpw">
					<mt-field label="宝宝姓名" placeholder="请输入宝宝姓名" 
						v-model="babyName"></mt-field>
					<mt-switch v-model="valueSex" v-if="valueSex==false" @change="sexSelect" class="switchF mainColor">
						女</mt-switch>
					<mt-switch v-model="valueSex" v-else @change="sexSelect" class="switchF mainColor">
						男</mt-switch>
					<span class="selectBir firstB" 
						style="line-height: 48px;">宝宝生日</span>
					<input class="selectBir inputB" placeholder="请选择生日" @click="openPicker" 
						v-model="dateTime" readonly style="border:none;"></input>
				</div>
				<!--日期选择-->
				<mt-datetime-picker 
				    ref="picker"
				    type="date"
				    placeholder="选择生日"
				    year-format="{value}年"
					month-format="{value}月"
					date-format="{value}日"
				    @confirm="handleConfirm">
				</mt-datetime-picker>
				
				<div class="mint-cell-wrapper" style="line-height: 48px;background: #fff;">
					<div class="mint-cell-title">
						<span class="mint-cell-text">居住地址</span>
					</div>
					<div class="mint-cell-value">
						<span id="city" ref="citys">湖北省武汉市东西湖区</span>
						<strong class="mint-field-other">&nbsp; > </strong>
					</div>
				</div>
				<br />
				
				<mt-button type="primary" class="animated zoomInUp" 
					size="large" @click="addInfo">添加会员</mt-button>
				<br />
			</div>
			<!--金额添加-->
			<div v-show="isThree">
				<mt-field label="充值金额" placeholder="请输入充值金额" 
				v-model="money" :attr="{maxlength:11}"></mt-field>
				<mt-radio
				  title="选择会员类型"
				  v-model="userLevelId"
				  :options="options">
				</mt-radio>
				<mt-button type="primary" class="animated zoomInUp" 
				size="large" @click="addMoney">修改金额</mt-button>
				<br />
			</div>
			
			<br /><br />
		</div>
	</body>
	<script type="text/javascript" src="../js/rem.js" ></script>
	<script type="text/javascript" src="../js/vue.js" ></script>
	<script type="text/javascript" src="../js/mint-ui.js" ></script>
	<script type="text/javascript" src="../js/axios.min.js" ></script>
	<script type="text/javascript" src="../js/mobileSelect.js" ></script>
	<script type="text/javascript" src="../js/moment.js" ></script>
	<script type="text/javascript">
	//倒计时
	let phoneReg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;

		new Vue({
			el:"#app",
			data:{
				money:"",
				userLevelId:"",
				name:"",
				phone:"",
				babyName:"",
				valueSex:"true",
				liveCity: "湖北省武汉市东西湖区",
				loanAreaId:"",
				dateTime:"",
				isOne:true,
				isTwo:false,
				isThree:false,
				searchNum:"",
				datas:[],
				userId:""
			},
			created(){
				this.getLists();
				this.options = [
				  {
				    label: '普通会员',
				    userLevelIdue: '1'
				  },
				  {
				    label: '自由会员',
				    userLevelId: '2'
				  },
				  {
				    label: '月度会员',
				    userLevelId: '3'
				  },
				  {
				    label: '季度会员',
				    userLevelId: '4'
				  },
				  {
				    label: '半年会员',
				    userLevelId: '5'
				  },
				  {
				    label: '年度会员',
				    userLevelId: '6'
				  },
				  {
				    label: '至尊会员',
				    userLevelId: '7'
				  },
				];
				
			},
			mounted(){
				var self=this;
	            //需要生成全国的省市县对应json
	            axios.get("city3.json").then(function(response){
					self.city=new MobileSelect({
		                trigger: "#city",
		                title: "居住地址",
		                position:[1,0,1],
		                wheels: [
		                    {data: response.data}
		                ],
		                callback:function(indexArr, data){
			                	self.liveCity=data[0].value+data[1].value+data[2].value;
			                	//显示城市
							self.$refs.citys.innerText=self.liveCity;
							self.loanAreaId=data[2].id;
							console.log(self.loanAreaId);
		                }
		            });
				});
			},
			methods:{
				openPicker:function(){
			        this.$refs.picker.open();
			        console.log(this.dateTime);
			    },
			    handleConfirm:function(data){
			   	 	//moment是格式化日期插件
			    		let date = moment(data).format('YYYY年MM月DD日');
      				this.dateTime = date;
			    },
			    //获取会员列表信息
			    getLists:function(){
			    		axios.get('http://106.13.55.49/api/jdAdmin/userList?pageNo=1&pageSize=1000')
						.then(data => {
							console.log(data);
							let self=this;
							if(data.data.status == 200){
								let shuzu=data.data.data.rows;
								for(let i in shuzu){
									self.datas.push(shuzu[i]);
								}
							}else{
								this.$toast(data.data.message);return;
							}
							
					})
			    },
			    //添加会员点击
			    addInfos:function(){
			    		this.isOne=false;
			    		this.isTwo=true;
			    		this.isThree=false;
			    },
			    //修改金额点击
			    changeInfo:function(userid){
			    		this.isOne=false;
			    		this.isTwo=false;
			    		this.isThree=true;
			    		this.userId=userid;
			    },
			    //查询会员
			    search:function(){
			    		this.datas=[];
			    		axios.get('http://106.13.55.49/api/jdAdmin/userList?pageNo=1&pageSize=1000&phone='+this.searchNum)
						.then(data => {
							console.log(data);
							let self=this;
							if(data.data.status == 200){
								let shuzus=data.data.data.rows;
								for(let i in shuzus){
									self.datas.push(shuzus[i]);
								}
							}else{
								this.$toast(data.data.message);return;
							}
							
					})
			    },
				//添加会员信息
				addInfo:function(){
					if(this.phone == "" || !phoneReg.test(this.phone)){
//						this.$toast({message:"请输入正确的手机号码格式",duration:1000});
						this.$toast("请输入正确的手机号码格式");return;
					}else if(this.babyName==""){
						this.$toast("请输入宝宝的姓名");return;
					}else if(this.dateTime == ""){
						this.$toast("请选择宝宝的生日");return;
					}
					console.log(this.name+","+this.phone+","+
					this.babyName+","+this.valueSex+","+this.dateTime+","+this.liveCity);
					let params={
						name: this.babyName,
						phone: this.phone,
						babyOne: this.babyName,
						valueSex: this.valueSex,
						dateTime: this.dateTime,
						liveCity:this.liveCity,
						loanAreaId:this.loanAreaId,
						openId:""
					};
					axios.post('http://106.13.55.49/api/jdAdmin/addNideUser',params)
						.then(data => {
							console.log(data);
							let self=this;
							if(data.data.status == 200){
								this.$toast("添加会员成功");
								location.reload();
							}else{
								this.$toast(data.data.message);return;
							}
							
					})
				},
				//添加金额
				addMoney:function(){
					console.log(this.userLevelId.userLevelId)
					axios.post("http://106.13.55.49/api/jdAdmin/addBalance",{
						balance:this.money,
						userId:this.userId,
						userLevelId:this.userLevelId.userLevelId
					}).then(data => {
						console.log(data);
						if(data.data.status == 200){
							this.$toast("修改添加成功");
							location.reload();
						}else{
							this.$toast(data.data.message);return;
						}
					});
					
				},
				//性别选择
				sexSelect:function(){
					console.log(this.valueSex);
				},
			}
			
		})
	</script>
</html>
